<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="text/javascript" src="../static/js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../static/js/logout.js"></script>
    <link rel="stylesheet" href="../static/css/all.css"/>
    <link rel="stylesheet" href="../static/css/user.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/navigation.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/login.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/button_color.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/background.css" type="text/css"/>
    <style type="text/css">
        #sel_but{
            margin: 4px;
        }
        .shoppingCart {
            width: 100%;
            height: 2000px;
        }

        .shop_table {
            width: auto;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            border-collapse: collapse;
        }

        .shop_table thead th, .shop_table tbody tr td {
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body class="body">
<div class="menu">
    <span class="font_title">美食街</span>
    <span class="user"></span>
</div>
<div class="navigation">
    <ul class="navigationBar">
        <li><a href="/foodCity">浏览美食</a></li>
        <li><a href="/shoppingCart">购物车</a></li>
        <li><a href="/goOrder">我的订单</a></li>
        <li><a href="/info">我的</a></li>
    </ul>
</div>
<div class="shoppingCart">
    <table class="shop_table" border="1">
        <thead>
            <th></th>
            <th>美食名称</th>
            <th>加入购物车时间</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>备注信息</th>
        </thead>
        <tbody class="shop_tab_tbody">
        </tbody>
        <tfoot>
        <tr>
            <td><input type="button" onclick="selectAll()" name="selectAll" align="center" value="全选" id="sel_but"/></td>
            <td class="sum_price" colspan="6" align="right">总价：<span class="price_show">0.00</span></td>
            <td class="billPlease" align="center">
                <button onclick="billPlease();" id="bill_but">去结账</button>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
<script type="text/javascript">
    //结账
    function billPlease() {
        //获取被选中商品的ID
        var ids = [];
        $("input[name='foods']:checked").each(function(){//把所有被选中的复选框的值存入数组
            var foodId = $(this).parent().parent().find("input[name='foodId']").val();
            ids.push(foodId);
        });
        if (ids.length !== 0){
            var remark = prompt("请输入备注信息");
            $.ajax({
                url: "/billPlease",
                dataType: "json",
                method: "post",
                //传递数组
                traditional:true,
                data: {
                    "ids": ids,
                    "remark": remark
                },
                success: function (rs) {
                    if (rs.message === "成功"){
                        alert("创建订单成功！");
                        window.location = "/goOrder";
                    } else {
                        alert("创建订单失败！");
                    }
                }
            })
        } else {
            alert("请勾选你要结账的商品");
        }
    }
    //全选
    function selectAll(){
        if ($("input[name='selectAll']").val() === "全选"){
            $("input[name='foods']").prop("checked", true);
            $("input[name='selectAll']").val("全不选");
        } else {
            $("input[name='foods']").prop("checked", false);
            $("input[name='selectAll']").val("全选");
        }
        sumPrice();
    }
    //算钱
    function sumPrice() {
        var sum = 0;
        var arr = [];
        $("input[name='foods']:checked").each(function(){//把所有被选中的复选框的值存入数组
            arr.push($(this).val());
        });
        for (let i = 0; i < arr.length; i++) {
            sum += parseFloat(arr[i]);
        }
        $(".price_show").text(sum);
    }

    $(function () {
        $.ajax({
            url: "/getShopCast",
            dataType: "json",
            success: function (rs) {
                for (let i = 0; i < rs.length; i++) {
                    // var remark = rs[i].remark !== undefined ? rs[i].remark : "";
                    var text = "<tr>" +
                        "<td><input type='checkbox' name='foods' class='foods' onclick='sumPrice()' value='" + rs[i].price * rs[i].num + "'/></td>" +
                        "<td><input type='text' name='foodId' value='" + rs[i].commodityId + "' style='display: none;'/>" + rs[i].name + "</td>" +
                        "<td>" + rs[i].created + "</td>" +
                        "<td>" + rs[i].price + "</td>" +
                        "<td><button style='width: 20px' onclick='minus(" + JSON.stringify(rs[i]) + ")'>-</button>" + rs[i].num + "<button style='width: 20px' onclick='addNum(" + JSON.stringify(rs[i]) + ")'>+</button></td>" +
                        "<td>" + rs[i].sumPrice + "</td>" +
                        "<td>" + rs[i].remark + "</td>" +
                        "<td><button onclick='doNotWant(" + rs[i].id + ")'>不想要了</button></td>" +
                        "</tr>";
                    $(".shop_tab_tbody").append(text);
                }
            }
        })
        $.ajax({
            url: "/getUser",
            method: "get",
            dataType: "json",
            success: function (rs) {
                if (rs.user != null) {
                    $(".user").append("欢迎你：" + rs.user.username + "，<a href='#' onclick='logout()'>注销</a>");
                } else {
                    //$(".user").append("<a href='#' onclick='showLogin()'>登录</a>查看更多内容");
                    alert("请先登录查看购物车");
                    window.location = "/foodCity"
                }
            }
        });
    })
    //+
    function addNum(shopCart) {
        $.ajax({
            url: "/addNum",
            dataType: "json",
            method: "post",
            data: shopCart,
            success: function (rs) {
                if (rs.message === "成功"){
                    window.location = "/shopCart";
                }
            }
        })
    }
    //-
    function minus(shopCart) {
        $.ajax({
            url: "/minus",
            dataType: "json",
            method: "post",
            data: shopCart,
            success: function (rs) {
                if (rs.message === "成功"){
                    window.location = "/shopCart";
                }
            }
        })
    }

    /**
     * 不想要了方法
     */
    function doNotWant(id) {
        var b = confirm("真的不要我了吗？");
        if (b){
            $.ajax({
                url: "/delShopCart",
                dataType: "json",
                method: "post",
                data: {
                    "id": id
                },
                success: function (rs) {
                    if (rs.message === "成功"){
                        alert("再见，我会想你的");
                        window.location = "/shopCart";
                    }
                }
            })
        }
    }
</script>
</html>